<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		
		
<div class="lunbo_wrap">
	<!--图片区域-->
	<ul>
		<li>
			<img src="images/kv1.jpg"/>
		</li>
		<li>
			<img src="images/kv2.jpg"/>
		</li>
		<li>
			<img src="images/kv3.jpg"/>
		</li>
		<li>
			<img src="images/kv4.jpg"/>
		</li>
	</ul>
	<a class="l_button"></a>
	<a class="r_button"></a>
	<div class="lunbo_controll">
		<a class="selecting"></a>
		<a></a>
		<a></a>
		<a></a>
	</div>
</div>

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var screen = $(document).width();//window.innerWidth/window.innerHeight
	var lis = $(".lunbo_wrap li");
	lis.css("width",screen+"px");
	var left = 0;//初始的位置为0
	var l_button = $(".l_button");
	var r_button = $(".r_button");
	var ul = $(".lunbo_wrap ul");
	var a = $(".lunbo_controll a");
	var activeIndex = 0;
	r_button.on("click",function(e){
		activeIndex++;
		if(activeIndex>=lis.length){
			activeIndex=0;//判断图片是否已经到达最后一张，如果是最后一张，则重新定位在第一张
		}
		show_img();
	})
	
	
	/**left值与图片下标索引的关系
	 * 显示第一张图   i:0  宽度:100    left:0 
	 * 显示第二张图   i:1  宽度:100    left:-100
	 * 显示第三张图   i:2  宽度:100    left:-200
	 * 推断出该公式：left = -i * width
	 */
	l_button.on("click",function(e){
		activeIndex--;
		if(activeIndex<0){
			activeIndex=lis.length-1;//判断图片是否已经到达第一张，如果是第一张，则重新定位在最后一张
		}
		
		show_img();
	})
	
	
	a.on("click",function(e){
		activeIndex = $(this).index();//把最新的下标更新到当前索引
		show_img();
	})
	
	var  t = setInterval(function(){
		
		activeIndex++;
		if(activeIndex>=lis.length){
			activeIndex=0;
		}
		show_img();
		
	},1000)
	
	
	$(".lunbo_wrap li").on("mouseover",function(){
		clearInterval(t);
	})
	$(".lunbo_wrap li").on("mouseout",function(){
		t = setInterval(function(){
			
			activeIndex++;
			if(activeIndex>=lis.length){
				activeIndex=0;
			}
			show_img();
		},1000)
	})
	function show_img(){
			//改变控制台的圆点显示顺序
			a.eq(activeIndex).addClass("selecting").siblings().removeClass("selecting")
			left = -activeIndex*screen;
			ul.css("left",left+"px");
	}
	
</script>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
